<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>日新网 - 我的资料</title>
    <link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
    <script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
    <style>
        .tab_nav li {
            width: 50% !important;
            text-align: center;
            cursor: pointer;
        }
        .tab_nav {
            margin-top: .4rem;
        }
        #ok, .basics_btn {
            width: 3rem !important;
            height: .5rem !important;
            background-color: #000232 !important;
            border-radius: 5px !important;
            color: #FFFFFF !important;
            font-size: .2rem !important;
            letter-spacing: .1rem;
            margin-left: 2.1rem !important;

        }
        .radio {
            font-size: 14px;
            margin-top: 4px !important;
        }
        .radio label {
            line-height: 1;
        }
        .radio_self {
            height: 32px;
            line-height: .21rem;
            background-color: #FFFFFF;
            /*border: 1px solid #c5c5c5;*/
            /*border-radius: 5px;*/
            margin-top: .05rem;
        }
        .form-control[disabled] {
            background-color: #fff !important;
        }
        input[type='radio'] {
            position: relative !important;
            top: 2px !important;
            margin-right: .1rem !important;
        }
        .disable {
            background-color: #949494 !important;
        }
        .no-active {
            display: none;
        }
    </style>
</head>
<body>
<!--nav-->
<tc_include file="Public:nav"/>
<!--我的问答页-->
<div class="tab_nav " id="tab_nav">
    <ul class="comWidth clearfix">
        <li class="active">基础信息</li>
        <li>账号管理</li>
    </ul>
</div>
<div id="tab_content">
    <div class="basics comWidth" style="display: block;">
        <form id="base_form" method="post" action="{:u('user/profile/edit_post')}">
            <div class="form-group">
                <label for="user_nicename">名字</label>
                <input type="text" class="form-control" id="user_nicename" name="user_nicename" value="{$user_nicename}" placeholder="名字" disabled="disabled">
            </div>
            <div class="form-group">
                <p>婚否</p>
                <div class="radio_self">
                    <div class="radio radio-inline">
                        <label>
                            <input type="radio" name="marry" value="1" {$marry== 1 ? 'checked' : ''} disabled="disabled">已婚
                        </label>
                    </div>
                    <div class="radio radio-inline">
                        <label>
                            <input type="radio" name="marry" value="0" {$marry== 0 ? 'checked' : ''} disabled="disabled">未婚
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="birthday">生日</label>
                <input type="date" class="form-control" id="birthday" name="birthday" value="{$birthday}" placeholder="出生年月" disabled="disabled">
            </div>
            <div class="form-group">
                <label for="position">职位</label>
                <input type="text" class="form-control" id="position" name="position" value="{$position}" placeholder="职位" disabled="disabled">
            </div>
            <div class="form-group">
                <label for="areaInfo">常驻城市</label>
                <div id="areaInfo">
                    <input name="city_id" hidden>
                </div>
            </div>
            <div class="form-group">
                <label for="company">公司</label>
                <input type="text" class="form-control" id="company" name="company" value="{$company}" placeholder="公司" disabled="disabled">
            </div>
            <div class="form-group">
                <label for="signature">简单介绍</label>
                <textarea class="form-control" rows="3" id="signature" disabled="disabled" name="signature">{$signature}</textarea>
            </div>
            <button type="button" class="btn btn-default container basics_btn" id="ok">修改</button>
        </form>
    </div>
    <div class="comWidth account1" style="display:none ;">
        <div class="opera_div">
            <div style="margin-left: 2.4rem;margin-top: .3rem;">
                <p>绑定手机: <span>{$short_mobile|default="未绑定"}</span></p>
                <p>绑定微信:
                    <notempty name="unionid">
                        <span class="font18">{$user_login|default="未绑定"}</span>
                    <else/>
                        <span class="font18">未绑定</span>
                    </notempty>
                </p>
                <p>登录密码:
                    <span>
                         <notempty name="user_pass">
                            ******
                        <else/>
                            无
                        </notempty>
                    </span>
                </p>
            </div>
            <button type="button" class="btn btn-default container basics_btn bind_mobile_btn <?php echo (empty($mobile) || empty($unionid)) ? '' : 'disable'?>" style="margin-top: .4rem;margin-bottom: .25rem;">
                <if condition="empty($unionid)">绑定微信<else />绑定手机</if>
            </button>
            <button type="button" class="btn btn-default container basics_btn mod_pass_btn {:empty($mobile) ? 'disable' : ''}">修改密码</button>
        </div>

        <div class="no-active mod_pass change_div" style="margin-top: .3rem;">
            <form action="{:U('user/profile/password_post')}" method="post">
                <input type="hidden" name="bind_mobile" value="1">
                <div class="binding">
                    <lable>输入手机号</lable>
                    <input class="mobile" type="text" name="mobile">
                </div>
                <div class="binding">
                    <lable>新密码</lable>
                    <input type="password" name="password">
                </div>
                <div class="binding">
                    <lable>确认密码</lable>
                    <input type="password" name="repassword">
                </div>
                <div class="binding">
                    <lable>动态验证码</lable>
                    <input type="text" class="basics2 shift_pre" name="sms_code">
                    <span class="timers shift">点击获取</span>
                </div>
                <button type="button" class="btn btn-default container basics_btn bind_ok" style="margin-top: .4rem;margin-bottom: .25rem;">完成</button>
                <button type="button" class="btn btn-default container basics_btn bind_no">取消</button>
            </form>
        </div>

        <div class="no-active bind_mobile change_div" style="margin-top: .3rem;">
            <form action="{:U('user/profile/password_post')}" method="post">
                <input class="mobile" type="hidden" value="{$mobile}" name="mobile">
                <div class="binding">
                    <lable>原密码</lable>
                    <input type="password" name="old_password" <?php echo $user_pass == sp_password('123456') ? 'placeholder="默认密码：123456"' : ''; ?> >
                </div>
                <div class="binding">
                    <lable>新密码</lable>
                    <input type="password" name="password">
                </div>
                <div class="binding">
                    <lable>确认密码</lable>
                    <input type="password" name="repassword">
                </div>
                <div class="binding">
                    <lable>动态验证码</lable>
                    <input type="text" class="basics2 shift_pre" name="sms_code">
                    <span class="timers shift">点击获取</span>
                </div>
                <button type="button" class="btn btn-default container basics_btn bind_ok" style="margin-top: .4rem;margin-bottom: .25rem;">完成</button>
                <button type="button" class="btn btn-default container basics_btn bind_no">取消</button>
            </form>
        </div>
    </div>
</div>
<!--页脚-->
<tc_include file="Public:footer"/>

<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
<script src="__TMPL__Public/assets/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/layer/layer_1.js"></script>
<script src="__PUBLIC__/js/area.js"></script>

<script>
    // 修改密码
    $('.mod_pass_btn').click(function () {
        if (!$(this).hasClass('disable')) {
            $('.bind_mobile').removeClass('no-active');
            $('.opera_div').addClass('no-active');
        }
    });

    // 绑定手机
    $('.bind_mobile_btn').click(function () {

        var has_weixin = "{$unionid}";
        if (!has_weixin) {
            window.location.href = "{:weixin_login_stepone()}";
            return;
        }

        if (!$(this).hasClass('disable')) {
            $('.mod_pass').removeClass('no-active');
            $('.opera_div').addClass('no-active');
        }
    });

    // 提交表单
    $('.bind_ok').click(function () {
        var valid = true;
        $(this).parents('form').find('input').each(function (index, item) {
            var value = $(item).val();
            if (!value) {
                $(item).focus();
                layer.msg('请完善信息');
                valid = false;
                return;
            }
        });
        if (valid) {
            $(this).parents('form').submit();
        }
    })

    $('.bind_no').click(function () {
        $('.opera_div').removeClass('no-active');
        $('.change_div').addClass('no-active');
    })
</script>

<!--城市下拉菜单，三级联动-->
<script>
    var area = {$area};
    area = eval(area);

    var areaPath = {$path ? $path : []};
    areaPath = eval(areaPath);

    $(function () {
        // 地址选择select的初始化
        initArea(2);
    });
</script>

<!--tab页切换效果-->
<script>
    (function () {
        $("#tab_nav ul li").on("click", function(){
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $("#tab_content>div").eq(index).show().siblings().hide();
        });

        var tab_index = "{$tab_index}";
        if (tab_index > 1) {
            $("#tab_nav ul li:nth-child(2)").addClass("active").siblings().removeClass("active");
            $("#tab_content>div").eq(1).show().siblings().hide();
        }
    })();
</script>

<!--保存/修改-->
<script>
    $(function () {
        $("#ok").click(function () {
            var text = $(this).html();
            if (text == "修改") {
                $(this).html("保存");
                $("input, textarea").removeAttr("disabled");

            } else if (text == "保存") {
                $('#base_form').submit();
                $("input, textarea").attr("disabled", "disabled");
            }
        })
    })
</script>

<!--验证码-->
<script>
    var sending = false;
    var timer   = 0;
    var sec     = 0;
    $('.shift').click(function () {
        if (!sending) {
            var _this   = $(this);
            var phone   = $(this).parents('form').find('.mobile').val();

            if (!isPhoneAvailable(phone)) {
                layer.msg("请输入正确的手机号");
                return;
            }

            $.post("{:U('User/Public/send_aliyun_sms')}", {phone : phone}, function (re) {
                if (re.status) {
                    layer.msg(re.info);
                    sending = true;
                    sec     = 60;
                    timer   = setInterval('change_sms_but()', 1000);
                    change_sms_but();

                } else {
                    layer.msg(re.info);
                }
            })
        }
    });

    function change_sms_but() {
        var but = $('.shift');
        if (sec == 1) {
            but.html("点击获取");
            clearInterval(timer);
            sending = false;
            sec     = 60;
        } else {
            sec--;
            but.html(sec + 's后获取');
        }
    }

    function isPhoneAvailable(str) {
        var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        if (!myreg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>